var entryViewer = new Ext.List({
    
    itemTpl : '{name}',
    cls: 'fullscroll',

    store: new Ext.data.Store({
        model: 'Entry',
        sorters: 'name',
        data: dbSchema.entryNames()
    }),
    
    listeners:{
        itemtap: function(list,idx){
            var record = list.store.getAt(idx);
            Ext.dispatch({
                controller: 'Navigator',
                action: 'entryChosen',
                tableName: record.get('id'),
                labelTo: record.get('name'),
                view: this.up('panel')
            })
        }
    }

});


var TableViewer = Ext.extend(Ext.Panel,{
    
    layout: 'card',
    
    tableName: false,
    isTableViewer: true,
    
    initComponent: function(c){
        
        TableViewer.superclass.initComponent.apply(this,arguments);
        
        this.store.isStore || (this.store = new Ext.data.Store(this.store));
        
        this.addDocked( this.toolbar = new Ext.Toolbar(this.toolbar));
        this.add(
            this.list = new Ext.List(Ext.apply(
                this.list,
                {store: this.store}
            ))
        );
        
    },

    toolbar: {
        dock: 'top',
        cls: 'with-buttons',
        items: [{
            iconCls: 'arrow_left',
            iconMask: true,
            ui: 'normal',
            handler: function(){
                Ext.dispatch({
                    controller: 'Navigator',
                    action: 'backFromTableView',
                    view: this.up('panel')
                })
            }
        }]
    },
    
    list: {
        xtype: 'list',
        cls: 'fullscroll',
        
        listeners:{
            itemtap: function(list,idx){
                Ext.dispatch({
                    controller: 'Navigator',
                    action: 'recordChosen',
                    record: list.store.getAt(idx),
                    view: this.ownerCt
                })
            }
        },
        
        itemTpl: '{name}'        
    },

    store: {
        model: 'EntryPoint',
        sorters: 'name',
        proxy: {
            type: 'sql',
            engine: dataSync
        }
    },

    cls: 'u-tableViewer',
    cardSwitchAnimation: {type: 'slide', duration: 400, direction: 'left'}

});


var RecordViewer = Ext.extend(Ext.Panel,{
    
    layout: 'card',
    
    isRecordViewer: true,

    toolbar: {
        dock: 'top',
        cls: 'with-buttons',
        items:[{
            iconCls: 'arrow_left',
            iconMask: true,
            ui: 'normal',
            
            handler: function(){
                Ext.dispatch({
                    controller: 'Navigator',
                    action: 'backFromRecordView',
                    view: this.up('panel')
                })
            }
        }]
    },

    fieldSet: {
        xtype: 'fieldset',
        defaults: {
            labelAlign: 'left',
            labelWidth: '35%'
        }
    },

    buttonList: {
        ui: 'none',
        cls: 'u-button-panel'
    },

    submitOnAction: true,
    cardSwitchAnimation: {type: 'slide', duration: 400, direction: 'left'},
    cls: 'u-recordViewer',
    
    initComponent: function(){
        
        RecordViewer.superclass.initComponent.apply(this,arguments);
        
        this.addDocked( this.toolbar = new Ext.Toolbar(this.toolbar) );
        this.add(new Ext.form.FormPanel({
            cls: 'recordData',
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items:[
                this.fieldSet = new Ext.form.FieldSet(this.fieldSet),
                this.buttonList = new Ext.Panel(this.buttonList)
            ]
        }));
        
    }

});